<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="space-around">
        <el-col class="search">
          <el-form ref="form" label-width="80px" :inline="true">
            <el-form-item label="学科名称">
              <el-input v-model="name"></el-input> </el-form-item
          ></el-form>
          <el-button @click="removeSbj">清除</el-button>
          <el-button type="primary" @click="searchSbj">搜索</el-button>
        </el-col>
        <el-col class="addSub">
          <el-button type="success" class="addBtn" @click="addSbj"
            >新增学科</el-button
          >
        </el-col>
      </el-row>
      <el-row class="sum">
        <el-col> <i class="el-icon-info"></i> 数据一共{{ num }}条 </el-col>
      </el-row>

      <el-table :data="subject" stripe style="width: 100%">
        <el-table-column label="序号" width="60" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="120">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="180">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString("{y}-{m}-{d}  {h}:{i}:{s}") }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="120">
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="120">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="120">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="
                $router.push(
                  `/subjects/directorys?id=${row.id}&name=${row.subjectName}`
                )
              "
              >学科分类</el-button
            ><el-button
              type="text"
              @click="
                $router.push(
                  `/subjects/tags?id=${row.id}&name=${row.subjectName}`
                )
              "
              >学科标签</el-button
            ><el-button type="text" @click="changeSbj(row)">修改</el-button
            ><el-button type="text" @click="delSbj(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.page"
          :total="num"
          :page-sizes="[5, 10, 15, 20]"
          :page-size.sync="page.pagesize"
          layout=" sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <subjectsAdd
      :changSbjShow.sync="changSbjShow"
      :changeState.sync="changeState"
      :changeSbjId.sync="changeSbjId"
    ></subjectsAdd>
  </div>
</template>


<script>
import { list, remove } from "../../api/hmmm/subjects";
import subjectsAdd from "../components/subjects-add";
export default {
  components: {
    subjectsAdd,
  },
  data() {
    return {
      page: {
        page: 1,
        pagesize: 10,
        subjectName: "",
      },
      name: "",
      num: 0,
      subject: [],
      changeState: "",
      changSbjShow: false,
      changeSbjId: 0,
    };
  },

  async created() {
    this.upDateList();
    this.$on("abc");
  },
  methods: {
    async upDateList() {
      const newPage = _.omitBy(
        this.page,
        (value, key) => _.isEmpty(value) && !_.isNumber(value)
      );
      const { data } = await list(newPage);

      this.num = data.counts;
      this.subject = data.items;
    },
    async handleSizeChange() {
      this.upDateList();
    },
    async handleCurrentChange() {
      this.upDateList();
    },
    searchSbj() {
      this.subject = this.subject.filter((t) => {
        if (t.subjectName.indexOf(this.name) === 0) {
          return true;
        } else {
          return false;
        }
      });
      this.num = this.subject.length;
    },
    removeSbj() {
      this.name = "";
      this.upDateList();
    },
    delSbj(row) {
      remove(row);
      this.upDateList();
      this.page.page = 1;
    },
    addSbj() {
      this.changeState = "新增学科";
      this.changSbjShow = true;
    },
    changeSbj(row) {
      this.changeState = "修改学科";
      this.changSbjShow = true;
      this.changeSbjId = row.id;
    },
  },
};
</script>
<<<<<<< HEAD
<style scoped lang='less'></style>

=======

<style scoped lang='less'>
.search {
  display: flex;
  .el-button {
    height: 36px;
  }
}
.addSub {
  position: relative;
  .addBtn {
    position: absolute;
    right: 0;
  }
}
.sum {
  background-color: #ccc;
  color: #666;
  padding: 10px;
}
</style>
>>>>>>> 22bafe9c0e608bc9b66bb44c21d3608f38af3b30
